import React from 'react'

import {connect} from 'react-redux'
import './BottomBar.scss'
import {ChangeTab} from '../actions/tabAction.js'
import {CHANGE_TAB} from '../actions/actionType.js'
class BottomBar extends React.Component{
    constructor(props){
        super(props)
        // this.changeTab = this.changeTab.bind(this)
    }
    renderItems(){
        let tabs = this.props.tabs
        return tabs.map((item, index)=>{
            let cls = item.key + ' btn-item'
            let name = item.name

            if (item.key === this.props.activeKey){
                cls += " active"
            }

            return (
                <div onClick={()=>this.changeTab(item.key)} className={cls} key={index}>
                    <div className="tab-icon"></div> 
                    <div className="btn-name">{name}</div>
                </div>
            )
        })
    }
    changeTab(activeKey){
        this.props.dispatch(ChangeTab({
            activeKey,
            type: CHANGE_TAB
        }))
    }
    render(){
        return (
            <div className="bottom-bar">
                {this.renderItems()}
            </div>
        )
    }
}

export default connect(
    state=>({
        tabs: state.tabReducer.tabs,
        activeKey: state.tabReducer.activeKey
    })
)(BottomBar)